<script setup lang='ts'>
import { ref, reactive, nextTick, watch, onMounted } from "vue";
const ReportVisible = ref<boolean>(false);
const dataList = ref();
const grade = ref();
const score = ref()
const columns: TableColumnList = [
  {
    label: "序号",
    type: "index",
    width: 100
  }, {
    label: "信用评分维度",
    prop: "dimensionName"
  },
  {
    label: "变量类别",
    prop: "variableCategory"
  },
  {
    label: "变量名",
    prop: "variableName"
  },
  {
    label: "变量值",
    prop: "scoringMethod",
    width: 200
  },
  {
    label: "分值",
    prop: "maxScore"
  }
]
function ViewScore(data) {
  dataList.value = data.data;
  grade.value = data.grade
  score.value = data.score
  ReportVisible.value = true;
}
function CloseScore() {
  ReportVisible.value = false;
  dataList.value = []
}
defineExpose({
  ViewScore
})
</script>

<template>
  <ReDialog :width="700" :height="550" :models="ReportVisible" @Closes="CloseScore">
    <template #header>
      <h2 style="text-align: center;">信用分详情</h2>
    </template>
    <template #main>
      <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" size="small" :data="dataList"
        :columns="columns" max-height="450" :header-cell-style="{
          background: 'var(--el-table-row-hover-bg-color)',
          color: 'var(--el-text-color-primary)'
        }">
      </pure-table>
      <dl class="btm_text">
        <dd>总分：{{ score }}</dd>
        <dd>信用等级：{{ grade }}</dd>
      </dl>
    </template>
    <template #footer>
    </template>
  </ReDialog>
</template>

<style scoped lang="scss">
.btm_text {
  margin-top: 10px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: center;

  dd {
    width: 150px;
  }
}
</style>
